<template>
  <el-dialog
    center
    :title="type == 'add' ? '添加' : '编辑'"
    v-model="Visible"
    width="40%"
    @close="handleClose"
  >
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="dialogForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="热源" prop="heatSourceId">
            <el-select
              v-model="ruleForm.heatSourceId"
              filterable
              clearable
              placeholder="请选择热源"
              style="width:100%;"
              @change="handleSourceChange"
            >
              <el-option
                v-for="item in heatSourceOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="换热站" prop="heatStationId">
            <el-select
              v-model="ruleForm.heatStationId"
              filterable
              clearable
              placeholder="请选择换热站"
              style="width:100%;"
              @change="handleHeatStationChange"
            >
              <el-option
                v-for="item in heatStationOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="系统" prop="heatSystemId">
            <el-select
              v-model="ruleForm.heatSystemId"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in heatSystemOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据点名称" prop="dataName">
            <el-input v-model="ruleForm.dataName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据点别名" prop="shortName">
            <el-input v-model="ruleForm.shortName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否存历史" prop="historyExist">
            <el-radio-group v-model="ruleForm.historyExist">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="底限" prop="lowestLimit">
            <el-input
              v-model="ruleForm.lowestLimit"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="高限" prop="highLimit">
            <el-input
              v-model="ruleForm.highLimit"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="标准化" prop="stand">
            <el-select
              v-model="ruleForm.stand"
              placeholder="请选择标准化标签"
              style="width:100%;"
            >
              <el-option
                v-for="item in labelStandOptions"
                :key="item.id"
                :label="item.stand"
                :value="item.stand"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="标签" prop="label">
            <el-select
              v-model="ruleForm.label"
              multiple
              placeholder="请选择标签"
              style="width:100%;"
            >
              <el-option
                v-for="item in labelOptions"
                :key="item.id"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="margin-top:20px;">
        <el-button
          type="primary"
          v-preventReClick
          @click="submitForm('ruleForm')"
          >确定</el-button
        >
        <el-button @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { reactive, toRefs, ref, onMounted, nextTick } from "vue";
import {
  addRealData,
  editRealData,
  getLabelData,
  getLabelStandData,
} from "@/api/realDataManage";
// import { getHeatSourcePermisstion } from "@/api/heatSource";
import { useStore } from "vuex";
import { getHeatStation } from "@/api/heatStation";
import { getSystemList } from "@/api/system";
import { ElMessage } from "element-plus";
export default {
  name: "UpdatePassword",
  props: {
    Visible: {
      type: Boolean,
      default: false,
    },
    dialogRow: {
      type: Object,
      default: () => {},
    },
    type: {
      type: String,
      default: "add",
    },
    heatSourceId: {
      type: String,
      default: "",
    },
  },
  setup(props, context) {
    const store = useStore();
    const dialogForm = ref(null);
    const state = reactive({
      heatSourceOptions: [],
      heatStationOptions: [],
      heatSystemOptions: [],
      alarmTypeOptions: [
        {
          label: "无",
          value: 0,
        },
        {
          label: "上限报警",
          value: 1,
        },
        {
          label: "持续上限报警",
          value: 2,
        },
        {
          label: "下限报警",
          value: 3,
        },
        {
          label: "持续下限报警",
          value: 4,
        },
        {
          label: "事件报警",
          value: 5,
        },
        {
          label: "关联报警",
          value: 6,
        },
      ],
      labelStandOptions: [],
      labelOptions: [], //标签
      ruleForm: {
        heatSourceId: "",
        heatStationId: "",
        heatSystemId: "",
        dataName: "",
        shortName: "",
        historyExist: 1,
        highLimit: 0,
        lowestLimit: 0,
        stand: "",
        label: [],
        sort: 100,
      },
      rules: {
        heatSourceId: [
          { required: true, message: "请选择热源", trigger: "change" },
        ],
        dataName: [
          { required: true, message: "请输入数据点名称", trigger: "blur" },
        ],
      },
    });

    onMounted(() => {
      initData();
      if (props.type == "add") {
        nextTick(() => {
          dialogForm.value.resetFields();
          const { heatSourceId, heatStationId, heatSystemId } = props.dialogRow;
          state.ruleForm.heatSourceId = heatSourceId;
          state.ruleForm.heatStationId = heatStationId;
          state.ruleForm.heatSystemId = heatSystemId;
        });
      } else {
        const {
          id,
          heatSourceId,
          heatStationId,
          heatSystemId,
          dataName,
          shortName,
          historyExist,
          highLimit,
          lowestLimit,
          sort,
          label,
          stand,
        } = props.dialogRow;
        state.ruleForm = {
          id,
          heatSourceId,
          heatStationId,
          heatSystemId,
          dataName,
          shortName,
          historyExist,
          highLimit,
          lowestLimit,
          stand,
          sort,
          label,
        };
      }
    });

    const initData = () => {
      getHeatSourceList();
      getLabelList();
      labelStandData();
    };

    /**热源 */
    const getHeatSourceList = async () => {
      const list = store.getters.sourceData;
      state.heatSourceOptions = list;
      state.ruleForm.heatSourceId = props.heatSourceId;
      await getHeatStationList();
      await getSystemData();
      // const { data: res } = await getHeatSourcePermisstion();
      // if (res.success) {
      //   const list = res.data;
      //   state.heatSourceOptions = list;
      //   getHeatStationList();
      //   getSystemData();
      // }
    };
    /**
     * 根据热源选择换热站
     */
    const getHeatStationList = async () => {
      const { data: resp } = await getHeatStation({
        heatSourceId: state.ruleForm.heatSourceId,
      });
      if (resp.success) {
        const list = resp.data;
        state.heatStationOptions = list;
      }
    };

    const handleSourceChange = () => {
      state.ruleForm.heatStationId = "";
      state.heatStationOptions = [];
      state.ruleForm.heatSystemId = "";
      state.heatSystemOptions = [];
      getHeatStationList();
      getSystemData();
    };

    const handleHeatStationChange = () => {
      state.ruleForm.heatSystemId = "";
      state.heatSystemOptions = [];
      getSystemData();
    };

    const getSystemData = async () => {
      const { heatSourceId, heatStationId } = state.ruleForm;
      const { data: res } = await getSystemList({
        heatSourceId,
        heatStationId,
      });
      if (res.success) {
        if (res.data) {
          const list = res.data.map((item) => {
            return { label: item.name, value: item.id };
          });
          state.heatSystemOptions = list;
        }
      }
    };

    const labelStandData = () => {
      getLabelStandData().then((res) => {
        if (res.data.success) {
          state.labelStandOptions = res.data.data;
        }
      });
    };

    const getLabelList = () => {
      getLabelData().then((res) => {
        if (res.data.success) {
          state.labelOptions = res.data.data;
        }
      });
    };

    const submitForm = () => {
      dialogForm.value.validate((valid) => {
        if (valid) {
          const {
            id,
            heatSourceId,
            heatStationId,
            heatSystemId,
            dataName,
            shortName,
            historyExist,
            highLimit,
            lowestLimit,
            sort,
            label,
            stand,
          } = state.ruleForm;

          let params = {
            heatSourceId,
            heatStationId,
            heatSystemId,
            dataName,
            shortName,
            historyExist,
            highLimit,
            lowestLimit,
            sort,
            label: label.join(","),
            stand,
          };
          if (props.type == "add") {
            addRealData(params).then((res) => {
              if (res.data.success) {
                ElMessage.success(res.data.msg);
                handleClose();
                context.emit("refresh");
              }
            });
          } else {
            params.id = id;
            editRealData(params).then((res) => {
              if (res.data.success) {
                ElMessage.success(res.data.msg);
                handleClose();
                context.emit("refresh");
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };

    const handleClose = () => {
      context.emit("close", false);
    };

    return {
      ...toRefs(state),
      submitForm,
      dialogForm,
      handleClose,
      handleSourceChange,
      handleHeatStationChange,
    };
  },
};
</script>
